<template lang='pug'>
  append var
  -var imgurl = 'static/image/'
  .main
    .inner
      .main-top
        .main-left
          img(src=imgurl + 'voice.png')
          span.notice
            .divnotice#noticeone(v-html='notice')
            .divnotice#noticetwo(v-html='notice')
        .main-right(style='min-width:300px;padding-left:10px')
          span(style='font-size: 16px;') {{gametype}}余额/{{gametype}}冻结余额：{{userInfo?userInfo.num:0}}/{{userInfo?userInfo.freezeNum:0}}
          // img(src=imgurl + 'point.png'    align = 'middle' @click='$router.push({path:"/ginseng_balance"})' style='cursor:pointer;')
          // | 金种子：{{userInfo?userInfo.seeds_amount:0}}枚
      // .main-top
      //   span(style='width:20px;')
      //   .main-right
      //     img(src=imgurl+'ying.png' 	align = 'middle' @click='$router.push({path:"/ginseng_balance"})' style='cursor:pointer;')
      //     | 银种子：{{userInfo?userInfo.silver_seeds_amount:0}}枚
      // .main-top
      //   span(style='width:20px;')
      //   .main-right
      //     img(src=imgurl+'ying.png' 	align = 'middle' @click='$router.push({path:"/ginseng_balance"})' style='cursor:pointer;')
      //     | 铜种子：{{userInfo?userInfo.copper_seeds_amount:0}}枚
      .main-middle
        .main-middle-son(:data-attr='"充值中心"' style='cursor:pointer;' @click='$router.push({path:"/index_ginseng_recharge"})' ) 充值中心
      .main-top(style='margin-bottom: 130px;')
        .main-xxxx
        .main-right(style='font-size: 16px;background-size:100%;')
          img(src=imgurl+'ginseng.png' 	align = 'middle' @click='$router.push({path:"/assetss"})' style='cursor:pointer;margin-right: 10px;')
          span(style="position: relative;top: -10px;left: 0px;") 青丹:{{userInfo?userInfo.qingDan:0}}银丹:{{userInfo?userInfo.yinDan:0}}
          br
          span(style="position: relative;top: -58px;left: 67px;") 仙丹:{{userInfo?userInfo.xianDan:0}}金丹:{{userInfo?userInfo.jinDan:0}}
      .main-bottom
        .main-bottom-son(@click="pop_one_start")
      con(:tablelist='index' @progress='showPoptwo')
    .Popup-two(v-show='pop_two')
      .Popup-two-top
        .Popup-two-top-son 正在炼丹{{size}}%
      .Popup-two-bottom 正在生成第X枚青丹（银丹、仙丹、金丹）
    .Popup-three(v-show='pop_three')
      img.close(src=imgurl + 'X-btn.png' @click='pop_three_close')
      .main-three-son-one(:data-attr='"游戏结束"') 游戏结束
      .cloce(data-attr='很遗憾，本次未中奖' v-show='list.qingdan == 0 && list.yindan == 0 && list.jindan == 0 && list.xiandan == 0') 很遗憾，本次未中奖
      ul(v-show = 'list.qingdan || list.yindan || list.jindan || list.xiandan')
        li(v-if='list.qingdan')
          p 青丹
          p {{list.qingdan}}
        li(v-if='list.yindan')
          p 银丹
          p {{list.yindan}}
        li(v-if='list.jindan')
          p 金丹
          p {{list.jindan}}
        li(v-if='list.xiandan')
          p 仙丹
          p {{list.xiandan}}

      .sure
        .sure-son(:data-attr='"确定"' @click='pop_three_close' style='cursor:pointer') 确定

</template>
<script>
import con from "./../common/table.vue";
import $ from "jquery";
// import { MessageBox } from "element-ui";
export default {
  data: function() {
    return {
      notice: "",
      type: u.getStore("winning").type,
      size: 0,
      width: 0,
      pop_two: false,
      pop_three: false,
      redicet: true,
      list: {
        qingdan: 0,
        yindan: 0,
        jindan: 0,
        xiandan: 0
      },
      gametype: u.getStore("winning").bitype,
      mount: u.getStore("mount") || 0,
      userInfo: u.getStore("userInfo"),
      index: {
        title: "炼丹排行榜",
        flag: false,
        table: [
          {
            title: "名次",
            list: ["青丹", "银丹", "仙丹", "金丹", "BPX"]
          },
          { title: "1", list: ["2枚", "30枚", "20枚", "23枚", "100"] }
        ],
        // pop: "BPX :<input class='bpxnumber'/>",
        pop: "是否花费10" + u.getStore("winning").bitype + "开始游戏"
        // poptitle: "BPX :10BPX"
      }
    };
  },
  components: {
    con: con
  },
  created() {
    this.pop_one_start();
    this.create();
  },
  mounted() {
    this.$parent.flag1 = false;
    this.$parent.flag2 = true;

    // this.animat();
    this.animated();
  },
  methods: {
    create() {
      u.userInfo(() => {
        this.userInfo = u.getStore("userInfo");
        u.indexnotice(data => {
          if (data && data[0].data && data[0].data.length) {
            data[0].data.forEach(el => {
              this.notice +=
                el.content +
                "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp";
            });
            this.anima("1");
            this.anima("2");
          }
          u.flag = true;
          this.index.flag = true;
        });
      });
      if (u.getStore("userInfo").num < 10) {
        // alert("矿石余额不足10，请充值");
        this.$parent.loading({
          message: "矿石余额不足10，请充值",
          type: false
        });
//        this.$router.push({ path: "/index_ginseng_recharge" });
        return;
      }
    },
    anima(id) {
      window.requestAnimationFrame =
        window.requestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.msRequestAnimationFrame;
      let idcla = id == "1" ? "noticeone" : "noticetwo";
      let elem = document.getElementById(idcla);
      let left = 0;
      requestAnimationFrame(step);
      function step() {
        if (left > -2 * elem.offsetWidth) {
          left -= 1;
          elem.style.left = left + "px";
          requestAnimationFrame(step);
          if (left == -elem.offsetWidth) {
            if (id == "1") {
              left = elem.offsetWidth;
            }
          } else if (left == -2 * elem.offsetWidth) {
            left = 0;
          }
        }
      }
    },
    pop_one_start() {
      if (this.redicet) {
        this.index.flag = true;
        this.redicet = false;
        var that = this;
      }
    },
    pop_three_close() {
      this.pop_three = false;
      this.size = 0;
      $(".Popup-three").css({ transform: "scale(0)" });
      this.redicet = true;
      this.create();

    },
    showPoptwo(flag) {
      if (u.getStore("userInfo").num < 10) {
        // alert("矿石余额不足10，请充值");
        this.$parent.loading({
          message: "矿石余额不足10，请充值",
          type: false
        });
        this.$router.push({ path: "/index_ginseng_recharge" });
        return;
      }
      this.index.flag = false;
      u.consume(
        {
          // bpx_num: 10,
          username: u.getStore("user").userid
          // type: 2
        },
        data => {
          if (data[0].code == 200) {
            this.animat();
            this.pop_two = flag;
            this.list = data[0].data;
            u.userInfo(() => {
              this.userInfo = u.getStore("userInfo");
              u.flag = true;
            });
          } else {
            // alert("游戏失败，请重新开始");
            this.$parent.loading({
              message: "游戏失败，请重新开始",
              type: false
            });
            this.index.flag = true;
          }
        }
      );
    },
    animat() {
      var that = this;
      var timer = setInterval(function() {
        if (!document.querySelector(".Popup-two-top-son")) {
          clearInterval(timer);
        }
        that.size = parseInt(
          document.querySelector(".Popup-two-top-son").offsetWidth / 490 * 100
        );
        if (that.size == 100) {
          that.pop_three = true;
          that.pop_two = false;
          setTimeout(() => {
            $(".Popup-three").css({ transform: "scale(1)" });
          }, 20);

          clearInterval(timer);
        }
      }, 10);
    },
    animated() {
      var flag = true;
      setInterval(function() {
        flag = !flag;
        flag
          ? $(".main-bottom-son").css("transform", "rotate(30deg)")
          : $(".main-bottom-son").css("transform", "rotate(-30deg)");
      }, 300);
    }
  }
};
</script>

<style lang='less' scoped>
@imgurl: "../../../static/image/";
.cloce {
  text-align: center;
  width: 100%;
  color: white;
  .title(3px #a65f0a);
  height: 97px;
  padding: 0 50px;
  font-size: 24px;
}
.title(@color) {
  position: relative;
  color: white;
  z-index: 0;
  &:before {
    position: absolute;
    z-index: -1;
    content: attr(data-attr);
    -webkit-text-stroke: @color;
  }
}

.nav {
  height: 76px;
  width: 300px;
  margin: 0 auto;
  background-image: url("@{imgurl}z_3.png");
  background-repeat: no-repeat;
  .font;
  line-height: 47px;
  position: relative;
  top: -28px;
  margin-bottom: 22px;
  text-align: center;
}

.font {
  font-size: 27.67px;
  font-weight: 700;
  color: #fff;
}

.main {
  background-image: url("@{imgurl}danbg.png");
  background-repeat: no-repeat;
  height: 1578px;
  padding-top: 50px;
  background-position: center;
  > .inner {
    margin: 0 auto;
    max-width: 1280px;
    height: 100%;

    > .main-top {
      display: flex;
      justify-content: space-between;
      width: 100%;
      margin-bottom: 10px;
      .main-left,
      .main-right {
        color: #fff;
        font-size: 20px;
        font-weight: 700;
        box-sizing: border-box;
        line-height: 60px;
      }
      > .main-right {
        min-width: 220px;
        height: 60px;
        background-image: url(../../../static/image/ginseng_base.png);
        background-repeat: no-repeat;
        background-position: center right;
        background-size: 100% 80%;
        text-shadow: 2px 3px 5px rgba(80, 55, 25, 0.7);
        > img {
          margin-right: 20px;
          position: relative;
          top: -5px;
        }
      }
      > .main-left {
        height: 60px;
        width: 480px;
        background-image: url(../../../static/image/notice_1.png);
        background-size: 480px 60px;
        > span {
          text-shadow: 2px 3px 5px rgba(80, 55, 25, 0.7);
        }
        > img {
          margin: 0px 20px;
          position: relative;
          top: -10px;
        }
        > .notice {
          display: inline-block;
          width: 80%;
          height: 100%;
          overflow: hidden;
          white-space: nowrap;
          > .divnotice {
            display: inline-block;
            font-size: 20px;
            font-weight: 700;
            position: relative;
            left: 0px;
          }
        }
      }
    }
    > .main-middle {
      display: flex;
      justify-content: flex-end;
      margin-bottom: 20px;
      > .main-middle-son {
        .title(4px #a65f0a);
        background-image: url("@{imgurl}excharge.png");
        background-repeat: no-repeat;
        height: 42px;
        width: 136px;
        .font;
        font-size: 16px;
        line-height: 42px;
        text-align: center;
        color: #fff;
      }
    }
    > .main-bottom {
      margin-bottom: 40px;
      > .main-bottom-son {
        width: 450px;
        height: 700px;
        margin: 0 auto;
        background-image: url("@{imgurl}stove.png");
        background-repeat: no-repeat;
        transition: transform 1s linear;
        transform: rotate(0deg);
      }
    }
  }
}

.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background-size: 100%;
}

.Popup-two {
  height: 80px;
  width: 500px;
  font-size: 16px;
  color: white;
  .fixed;
  > .Popup-two-top {
    height: 47px;
    background: url("@{imgurl}Bg1.png") no-repeat;
    background-size: 100%;
    padding-left: 9px;
    padding-top: 6px;
    text-align: center;
    > .Popup-two-top-son {
      height: 34px;
      width: 0%;
      background: url("@{imgurl}Progress.png") no-repeat;
      line-height: 34px;
      background-position: -10px -5px;
      background-size: 102% 45px;
      white-space: nowrap;
      .animation(logo, 5s, ease, infinite, 1s, forwards);
    }
  }
}

.Popup-three {
  height: 274px;
  width: 634px;
  background: url("@{imgurl}Panel-two.png") no-repeat;
  transition: transform 2s ease;
  transform: scale(0);
  .fixed;
  > .main-three-son-one {
    .nav;
    .title(5px #1c6b65);
  }
  > .close {
    position: absolute;
    right: 0;
  }
  > ul {
    display: flex;
    justify-content: space-around;
    padding: 0 50px;
    li {
      background: url("@{imgurl}Base-1.png") no-repeat;
      width: 86px;
      height: 97px;
      text-align: center;
      p {
        line-height: 10px;
      }
      > p:nth-of-type(1) {
        padding-top: 15px;
        height: 50px;
        line-height: 50px;
        color: white;
        font-size: 18px;
      }
      > p:nth-of-type(2) {
        line-height: 2;
        font-size: 14px;
        color: #ffd327;
      }
    }
  }
  .sure {
    position: relative;
    height: 66px;
    > .sure-son {
      height: 66px;
      width: 210px;
      background: url("@{imgurl}excharge.png") no-repeat;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      background-size: 100%;
      top: 33px;
      line-height: 66px;
      color: #fff;
      font-size: 24.76px;
      text-align: center;
      .title(3px #a65f0a);
    }
  }
}

.slide-scale(@start,@end,@name) {
  @keyframes @name {
    from {
      transform: scale(@start, @start);
    }
    to {
      transform: scale(@end, @end);
    }
  }
}

.slide-in(@size-start,@size-end,@name) {
  @keyframes @name {
    from {
      width: @size-start;
    }
    to {
      width: @size-end;
    }
  }
  // @-webkit-keyframes @name {
  //   from {
  //     background-size: @size-start 45px;
  //   }
  //   to {
  //     background-size: @size-end 45px;
  //   }
  // }
  // @-moz-keyframes @name {
  //   from {
  //     background-size: @size-start 45px;
  //   }
  //   to {
  //     background-size: @size-end 45px;
  //   }
  // }
  // @-o-keyframes @name {
  //   from {
  //     background-size: @size-start 45px;
  //   }
  //   to {
  //     background-size: @size-end 45px;
  //   }
  // }
}

.slide-in(0%, 100%, logo);
.animation(@animation-name,@animation-duration,@animation-timing-function,@animation-infinite,@animation-delay,@play-state) {
  -webkit-animation: @arguments;
  -moz-animation: @arguments;
  -ms-animation: @arguments;
  -o-animation: @arguments;
  animation: @arguments;
}
</style>
